<!-- src/pages/ListPage/ListPage.vue -->

<template>
	<view class="pageWrap">
		<view v-for="(item, index) in list" :key="index" class="item">
			<view class="header">
				<view class="header-left">
					<!-- <image src="/static/imgs/avatar.png" mode="aspectFill" class="avatar"></image> -->
					<view class="avatar-wrap">
						<uni-icons class="right-icons" type="person-filled" size="30"></uni-icons>
					</view>
					<view class="info">
						<text class="name">admin</text>
						<text class="location">上海</text>
					</view>
				</view>
				<view class="header-right">
					<uni-icons class="right-icons" type="more-filled" size="20"></uni-icons>
				</view>
			</view>
			<view class="main">
				<image :src="item.image" mode="aspectFit" class="image"></image>
				<text class="title">{{ item.title }}</text>
				<text class="content">{{ item.content }}</text>
			</view>
			<view class="footer">
				<view class="footer-left">
					<uni-icons type="notification" size="12"></uni-icons>
					<text>成为第一个加油的人吧！</text>
				</view>
				<view class="footer-right">
					<uni-icons class="right-icons" type="hand-up" size="20"></uni-icons>
					<uni-icons class="right-icons" type="chatbubble" size="20" @click="addMessage(item)"></uni-icons>
					<uni-icons class="right-icons" type="star" size="20"></uni-icons>
				</view>
			</view>
			<view class="message">
				<text class="message-left">-Xlan---x:</text>
				<text class="message-right">何杰也是因为后期20多度的温度掉速的，不然他应该可以再次突破自及，打破个人pb</text>
			</view>
			<view class="message">
				<text class="message-left">乱动症呆哥:</text>
				<text class="message-right">加油</text>
			</view>
			<view class="commentsWrap">
				<text @click="allComments(item)">查看全部评论</text>
			</view>
		</view>
		<view class="add-btn" @click="goToAddPage">
			<uni-icons class="right-icons" type="compose" color="#ffffff" size="30"></uni-icons>
		</view>
		<!-- <view class="mask-diy"></view> -->
	</view>
</template>

<script>
	import {login} from '../../service/api/api.js'
	export default {
		computed: {
			list() {
				return this.$store.state.find.list
			}
		},
		mounted() {
			this.$store.dispatch('fetchList').then(() => {
			    console.log('this.list',this.list)
			});
		},
		methods: {
			goToAddPage() {
				console.log('aaaa')
				uni.navigateTo({
					url: '/pages/goal/Add/index'
				})
			},
			addMessage(item) {
				console.log(item)
			},
			allComments(item) {
				
			}
		}
	}
</script>

<style>
	@import url('/static/css/main.css');

	.item {
		margin-bottom: 20px;
		border-radius: 20px;
		padding: 10px;
		width: 90%;
		margin: 0 auto;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
	}
	.avatar-wrap {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: rgba(100,100,100,0.1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10px;
	}

	.info {
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 16px;
		font-weight: bold;
	}

	.location {
		font-size: 14px;
		color: #888;
	}

	.forward-icon {
		width: 30px;
		height: 30px;
	}

	.main {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
	}

	.image {
		width: 100%;
		border-radius: 20px;
	}

	.title {
		font-size: 14px;
		font-weight: bold;
		margin-top: 10px;
	}

	.content {
		font-size: 12px;
		margin-top: 5px;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15px 0;
	}

	.footer-left {
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #888;
	}

	.footer-right {
		display: flex;
		align-items: center;
	}
	.right-icons {
		margin: 0 5px;
	}
	.icon {
		width: 25px;
		height: 25px;
		margin-left: 10px;
	}

	.add-btn {
		position: fixed;
		bottom: 100px;
		right: 20px;
		background-color: #4cd964;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		font-size: 20px;
	}
	.header-right {
		display: flex;
		align-items: center;
	}
	.header_forward {
		width: 50rpx;
		margin: 0 10rpx;
	}
	.header_comments {
		width: 100%;
	}
	.message {
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 5px;
	}
	.message-right {
		color: rgba(0,0,0,0.7);
		margin-left: 5px;
	}
	.commentsWrap {
		color: rgba(0,0,0,0.3);
		font-size: 12px;
	}
	.mask-diy {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background-color: red;
		left: 0;
		top: 0;
	}
</style>